<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>聊天室</title>
	<style type="text/css">
		* {margin:0; padding:0;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-o-box-sizing: border-box;-ms-box-sizing: border-box;}
		* html body {overflow:visible;}
		* html iframe, * html frame {overflow:auto;}
		* html frameset {overflow:hidden;}
		body {color:#000; font-family: Verdana, Arial, sans-serif; text-align:center;}
		body, ul, ol, li, p, h1, h2, h3, h4, h5, h6, form, fieldset, table, td, img, div, tr {margin:0; padding:0;}
		li {list-style: none;}
		::-webkit-scrollbar {
	    	width: 3px;
		}
		 
		/* Track */
		::-webkit-scrollbar-track {
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		}
		 
		/* Handle */
		::-webkit-scrollbar-thumb {
		    -webkit-border-radius: 10px;
		    border-radius: 10px;
		    background: #EFEFEF; 
		    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 
		}
		::-webkit-scrollbar-thumb:window-inactive {
			background: rgba(255,0,0,0.4); 
		}

		.chat-box{margin:auto;margin-top:20px;width:900px;height:700px;background-color:white;border-radius:4px;}
		
		.left{float:left;position:relative;height:700px;width:700px;}
		.right{float:left;position:relative;height:700px;width:200px;}
		
		.message-box{width:100%;height:580px;overflow-x:hidden;overflow-y:auto;border:1px solid #DEDEDE;border-bottom:none;}
		.send-box{width:100%;height:120px;border:1px solid #EFEFEF;}
		
		.online-list{width:200px;height:700px;}
	</style>
	<script type="text/javascript" src="jquery-3.1.1.min.js"></script>
	<script type="text/javascript">
		ws = false;
		var username = 'tom';//prompt("What\'s your name?","");
		if(username!=null && username!=""){
		    ws = new WebSocket("ws://192.168.100.142:8890");
		    //握手监听函数
			ws.onopen = function(){
			    //状态为1证明握手成功，然后把client自定义的名字发送过去
			    if(ws.readyState==1){
		            ws.send("username="+username+"&to=all&msg=欢迎小伙伴【"+username+"】加入聊天室！");
		        }
			}
		}
	</script>
</head>
<body>
<div id="close">关闭Socket</div>
<input type="button" id="send">
	<div class="chat-box">
		<div class="left">
			<div class="message-box">

			</div>
			<div class="send-box">
				dsfsd
			</div>
		</div>
		<div class="right">
			<div class="online-list">在线列表</div>
		</div>
	</div>

<script>
	if(typeof(WebSocket)=='undefined'){alert('你的浏览器不支持 WebSocket,推荐使用Google Chrome 或者 Mozilla Firefox');}else{console.log('支持websocket');}
	
	//监听服务器端推送的消息
	ws.onmessage = function(msg){
		var data = [{"stuName":
						[{"name":"Tom"},{"name":"Jack"},{"name":"jony"}],
					"className":
						[{"class":"基础日语"},{"class":"中级日语"},{"class":"Java SE"}]
					}];
	    $('body').append("<p>"+data.stuName.name+"</p>");
	}
	//错误返回信息函数
	ws.onerror = function(){
	    console.log("error");
	};
	//断开WebSocket连接
	ws.onclose = function(){
	    // ws = false;
	    ws.close();
	}
	$("#sendMsg").click(function(event) {
		var message = $("#message").val();
		ws.send('uid=1409123225&msg='+message+'&to=58aa8082e94ec');
	});

	$("#close").click(function(event) {
		ws.close();
	});
	$("#send").click(function(event) {
		ws.send("Z");
	});
</script>
</body>
</html>